
<template>
    <Carousel></Carousel>
    <Search></Search>
    <!-- 底部展示医院 -->
    <el-row gutter="20">
        <el-col :span="20">
            <Level></Level>
            <Region></Region>
            <div class="hospital">
                <Card shadow="hover" class="item" v-for="(item, index) in hospitalArr" :key="index" :hospitalInfo="item"></Card>
            </div>
        </el-col>
        <el-col :span="4"><div class="grid-content ep-bg-purple-light" />456</el-col>
    </el-row>
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 40]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout=" prev, pager, next, jumper, ->, sizes, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="currentPageChange"
        />
    </div>

    <!--        <Hospital></Hospital>-->
</template>


<script setup lang="ts">


import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from '@/pages/home/level/index.vue'
import Region from '@/pages/home/region/index.vue'
import Card from '@/pages/home/card/index.vue'
import {onMounted} from "vue";
import {reqHospital} from '@/api/home/index.ts'
import {ref} from 'vue'
import {ComponentSize} from "element-plus";

const pageNo = ref(1);
const total = ref(1)
const pageSize = ref(10);
// 参考这里：https://element-plus.org/zh-CN/component/pagination.html#pagination-%E5%88%86%E9%A1%B5
const size = ref<ComponentSize>('large')
const disabled = ref(undefined); // 必须是undefined, 否则页码输入框无法输入
const background = ref(true);
const hospitalArr = ref([])

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    getHospitalInfo()
}
const currentPageChange = (val: number) => {
    console.log(`current page: ${val}`)
    getHospitalInfo();
}

onMounted(()=>{
    getHospitalInfo()
})

const getHospitalInfo = async ()=>{
    console.log(111, pageNo.value,pageSize.value)
    let result:any = await reqHospital(pageNo.value,pageSize.value);
    console.log('result', result);
    if (result.data.code == 200){
        hospitalArr.value = result.data.data.content
        total.value = result.data.data.totalElements
        pageNo.value = result.data.data.pageable.pageNumber+1
        pageSize.value = result.data.data.pageable.pageSize
        console.log(hospitalArr.value)
        console.log(total.value)
        console.log(pageNo.value)
        console.log(pageSize.value)
    }
    return result;
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
.ep-bg-purple{
    background-color: purple;
}
.ep-bg-purple-light{
    background-color: mediumpurple;
}

.hospital{
    display: flex;
    justify-content: space-between;// 主轴两边对其
    flex-wrap: wrap; // 自动换行
    .item{
        width: 48%;
        margin: 10px 0px;
    }
}


.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}
.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
